<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./res/style.css">
</head>
<body>
    <div id="app">
       <table v-if="isShow">
            <tr>
                <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th>书籍名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th>出版日期&nbsp;</th>
                <th>&nbsp;价格&nbsp;&nbsp;&nbsp;</th>
                <th>购买数量</th>
                <th>&nbsp;&nbsp;操作</th>
            </tr>
            <tr v-for="(item,index) in book">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>￥{{item.price.toFixed(2)}}</td>
                <!-- <td>{{item.num}}</td> -->
                <td><image src="./res/品类减少_o.png" class="images" @click="reduce(index)"></image><p>{{item.num}}</p><image src="./res/品类增加_o.png" class="images" @click="add(index)"></image></td>
                <td><button @click="remove(index)">移除</button></td>
            </tr>
       </table>
            <h2 v-show="isShow2">购物车为空</h2>
       <p v-show="isShow">总价: ￥{{sumPrice.toFixed(2)}}</p>
    </div>
   
</body>
<script src="./js/vue.js"></script>
<script src="./js/main.js"></script>
<style>
    .images {
        width: 30px;
        height: 30px;
        vertical-align: middle
    }
    p {
        display: inline-block;
    }
</style>
</html>